<template>
  <div class="page_dict_index app-container" v-loading="loading">
    <cfCard title='' class='page-container-search bottom12'>
      <div slot='content'>
        <el-form :model="searchParams" ref="searchParams" size="small" :inline="true" label-width="68px">
          <el-form-item label="字典名称" prop="dictName">
            <el-input v-model="searchParams.dictName" placeholder="请输入字典名称" clearable style="width: 240px" v-search="handleSearch"/>
          </el-form-item>
          <el-form-item label="字典类型" prop="dictType">
            <el-input v-model="searchParams.dictType" placeholder="请输入字典类型" clearable style="width: 240px" v-search="handleSearch" />
          </el-form-item>
          <el-form-item label="状 态" prop="status">
            <el-select v-model="searchParams.status" placeholder="字典状态" clearable style="width: 240px" @change="handleSearch">
              <el-option v-for="dict in sysNormalDisable" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间" prop="createTime">
            <el-date-picker
              v-model="searchParams.createTime"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleSearch"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </cfCard>
    <cfCard title='字典列表' hasTable :tableObj='tableDataObj' class='page_house-container-bottom'>
      <!--表格区域-->
      <template slot='btn'>
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:dict:add']" >新增</el-button>
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:dict:export']" >导出</el-button>
        <el-button type="danger" plain icon="el-icon-refresh" size="mini" @click="handleRefreshCache" v-hasPermi="['system:dict:remove']" >刷新缓存</el-button>
      </template>
      <template slot='content'>
        <cfTable ref="cfTable" :tableDataObj='tableDataObj' :tableData='tableData'>
          <template slot="dictType">
            <el-table-column label='字典类型' min-width='100px'>
              <!-- <router-link slot-scope="scope" :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
                <span>{{ scope.row.dictType }}</span>
              </router-link> -->
              <span class="link-span" slot-scope="{row}" @click="handleData(row)">{{ row.dictType }}</span>
            </el-table-column>
          </template>
          <template slot="status">
            <el-table-column label='状 态' width='100px' align='center'>
              <dict-tag slot-scope="scope" :options="sysNormalDisable" :value="scope.row.status"/>
            </el-table-column>
          </template>
          <template slot="createTime">
            <el-table-column label='创建时间' width='180px'>
              <span slot-scope="scope">{{ parseTime(scope.row.createTime) }}</span>
            </el-table-column>
          </template>
          <template slot='operate'>
            <el-table-column label='操 作' width='120px' align='right'>
              <span slot-scope='{row}'>
                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(row)" v-hasPermi="['system:dict:edit']" >修改</el-button>
                <el-button size="mini" class="delete-span" type="text" icon="el-icon-delete" @click="handleDelete(row)" v-hasPermi="['system:dict:remove']" >删除</el-button>
              </span>
            </el-table-column>
          </template>
        </cfTable>
        <pagination :total='queryParams.total' :page.sync='queryParams.pageNum' :limit.sync='queryParams.pageSize' @pagination='getListFn'/>
      </template>
    </cfCard>
    <updateDict v-if="dialogObj.visible" :dialogObj="dialogObj" @refresh="getListFn"></updateDict>
    <cfPageDialog v-if='pageDialogObj.visible' :pageDialog='pageDialogObj'>
      <dictData v-if='pageDialogObj.visible' :pageDialogObj='pageDialogObj'></dictData>
    </cfPageDialog>
  
    
  </div>
</template>

<script>
import { listType, delType, exportType, refreshCache } from "@/api/system/dict/type";
import updateDict from "./updateDict.vue";
import dictData from './data';
export default {
  name: "Dict",
  components: {updateDict, dictData},
  data() {
    return {
      loading: true,/**遮罩层*/ 
      tableData: [], /**字典表格数据*/ 
      dialogObj: {
        visible: false,
        id: '',
        title: '',
        width: '538px'
      },
      queryParams: { /**查询参数*/ 
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      searchParams: {
        dictName: undefined,
        dictType: undefined,
        status: undefined
      },
      tableDataObj: {
        id: 'id',
        showSelection: true,
        defaultExpandAll: true,
        treeProps: {children: 'children', hasChildren: 'hasChildren'},
        option: [
          {id: 1, label: '字典编号', prop: 'dictId', align: 'center', width: 100, show: 1, needSlot: false},
          {id: 2, label: '字典名称', prop: 'dictName', show: 1, needSlot: false},
          {id: 3, label: '字典类型', prop: 'dictType', show: 1, needSlot: true},
          {id: 4, label: '状态', prop: 'status', show: 1, needSlot: true},
          {id: 5, label: '备注', prop: 'remark', show: 1, needSlot: false},
          {id: 6, label: '创建时间', prop: 'createTime', show: 1, needSlot: true},
        ]
      },
      pageDialogObj: { /**二级菜单页面配置文件*/
        visible: false, /**控制弹窗显示和隐藏*/
        id: '', /**数据唯一标识，用于详情和编辑*/
        title: '标题', /**二级菜单标题*/
        from: undefined, /**二级菜单操作对象来源Object：{id, title, componentName}*/
        componentName: '' /**二级菜单对应组件*/
      }
    };
  },
  async created() {
    await this.getSysNormalDisable();
    this.getListFn();
  },
  methods: {
    async getListFn() {  /** 查询字典类型列表 */
      this.loading = true;
      const data = {
        ...this.searchParams,
        ...this.queryParams
      }
      delete data.createTime;
      if(Array.isArray(this.searchParams.createTime) && this.searchParams.createTime.length) {
        data.params = {
          beginTime: this.searchParams.createTime[0],
          endTime: this.searchParams.createTime[1]
        }
      }
      const res = await listType(data);
      if(res.code == 200) {
        this.tableData = res.rows;
        this.queryParams.total = res.total;
      }
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    handleSearch() {  /** 搜索按钮操作 */
      this.queryParams.pageNum = 1;
      this.queryParams.total = 0;
      this.tableData = [];
      this.getListFn();
    },
    handleReset() {  /** 重置按钮操作 */
      this.resetForm("searchParams", ()=>{
        this.handleSearch();
      });
    },
    handleAdd() { /** 新增按钮操作 */
      this.dialogObj.visible = true;
      this.dialogObj.id = '';
      this.dialogObj.title = '添加字典类型';
    },
    handleUpdate(row) { /** 修改按钮操作 */
      const dictId = row.dictId;
      this.dialogObj.visible = true;
      this.dialogObj.id = dictId;
      this.dialogObj.title = '修改字典类型';
    },
    handleData(row) { /**查看字典数据 */
      this.pageDialogObj.visible = true;
      this.pageDialogObj.id = row.dictId;
      this.pageDialogObj.title = '字典数据';
    },
    handleDelete(row) {  /** 删除按钮操作 */
      const dictIds = row.dictId;
      this.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？').then(async ()=> {
        this.loading = true;
        const res = await delType(dictIds);
        if(res.code == 200) {
          this.handleSearch();
          this.$modal.msgSuccess("删除成功");
        }
        setTimeout(() => {
          this.loading = false;
        }, 500);
      }).catch(() => {});
    },
    async handleExport() {  /** 导出按钮操作 */
      this.loading = true;
      let res = await exportType(this.queryParams);
      if(res.data && res.status == 200) {
        this.downloadFilesFn(res, `type_${this.formatDate()}.xlsx`);
      }
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    handleRefreshCache() {  /** 刷新缓存按钮操作 */
      refreshCache().then(() => {
        this.$modal.msgSuccess("刷新成功");
        this.$store.dispatch('dict/cleanDict');
      });
    }
  }
};
</script>